import React from "react";
import Reflux from "reflux";
import {LdhDetailForm, LdhDetailPage} from "@biz/PageCompnents";
import {Message} from "@biz/Components";
import GUtils from "@/utils";


export default class BaseDetailPage extends Reflux.Component {
    formRef = React.createRef();

    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }

    componentDidMount() {
        let {detailStatus} = this.state;
        if (["view", "edit"].includes(detailStatus)) {
            let id = GUtils.getQueryString("id");
            if (!id) {
                Message.error("参数非法！");
                this.setState({detailStatus: "view"});
                return;
            }
            this.action.getDetail(id, (detail) => {
                this.onGetDetailCompleted(detail);
                this.form().setFieldsValue(detail);
            });

        }
    }


    onGetDetailCompleted(detail){

    }

    form() {
        return this.formRef.current;
    }

    onSubmit(values) {
        let {detailStatus, detail} = this.state;
        let {id} = detail;
        let vo = {id, ...values};
        this.action[detailStatus](vo);
    }

    // 子组件完善此方法，展示具体的数据
    renderDetail(isDetail){
        return <div></div>
    }
    render() {
        let {loading, detailStatus} = this.state;
        let isDetail = detailStatus == "view";

        return <LdhDetailPage className={this.className}>
            <LdhDetailForm onSubmit={this.onSubmit} labelWidth="180px"
                           ref={this.formRef} loading={loading}
                           isDetail={isDetail} requiredMark={!isDetail}>
                {this.renderDetail(isDetail)}
            </LdhDetailForm>
        </LdhDetailPage>

    }
}